<template>
	<view>
		<view class="order xp24-32 xbs ">

			<view class="">
				<view class="xflex-x-between xmt32">
					<view class="xflex-x">
						<image class="addicon" src="/static/image/mine/address.png" mode=""></image>
						<view class="addname">
							{{infoOrder?.address}}
						</view>

					</view>
					<view class="xflex-x-center" @click="nav()">
						<view class="addxg">
							取消修改
						</view>
						<image class="jt" src="/static/image/mine/jt.png" mode=""></image>
					</view>
				</view>


				<view class="xmt20">
					<view class="time">
						{{infoOrder?.order_info?.time}}<span class="xml32">{{infoOrder?.order_info?.night}}晚</span>
					</view>
					<view class="info ">
						{{infoOrder?.order_info?.adult}}成人 · {{infoOrder?.order_info?.children}}儿童
					</view>
				</view>

				<view class="star xmt20 xai">
					<view class="">
						<view class="xflex-x-between">
							<view class="xmb20">
								当前位置：{{counter.enterInfo.keyword}}
							</view>

							<view class="" @click="addressInfo.show = true">
								修改
							</view>
						</view>


						<view class="xflex-x-between">
							<view class="xmb20">
								人员：{{adult}}成人 · {{child}}儿童 · {{counter.enterInfo.house.length}}间 <span
									v-if="counter.enterInfo.type">· {{counter.enterInfo.type}}</span>
							</view>
							<view class="" @click="roomdata.show = true">
								修改
							</view>
						</view>

						<view class="xflex-x-between">
							<view class="xmb20">
								时间： {{toformatDate(counter.enterInfo.start)}}入住
								{{toformatDate(counter.enterInfo.end)}}离店
							</view>
							<view class="" @click="timeData.show = true">
								修改
							</view>
						</view>

						<view class="xflex-x-between">
							<view class="xmb20">
								宾客评分： {{scoreNamecpt}}
							</view>

							<view class="" @click="conditionData.show = true">
								修改
							</view>
						</view>

						<view class="xmb20">
							免费服务： {{freeNamecpt}}
						</view>

						<view class="xmb20">
							配套周边： {{supportNamecpt}}
						</view>
						<view class="xmb20">
							收费服务： {{chargeNamecpt}}
						</view>
						<view class="xmb20">
							可接受距离： {{counter.enterInfo.distance}} 公里
						</view>

						<view class="xflex-x-between">
							<view class="xmb20 xpb24">
								价格：{{counter.enterInfo.price}}
							</view>
							<view class="" @click="open()">
								修改
							</view>
						</view>

						<!-- <view class="">
							<w-slider @touchEnd="onprice"  :endPrice="max" :defaultprice="counter.enterInfo.price"></w-slider>
						</view> -->


					</view>

				</view>

			</view>


		</view>

		<view class="xp24  xmt32 xbgf">
			<view class="xflex-x xmb40">
				<view class="lab">
					订单编号：
				</view>
				<view class="xflex-x">
					<view class="value">
						{{infoOrder?.sn}}
					</view>
					<view class="copy xml10" @click="copy(infoOrder.sn)">
						复制
					</view>
				</view>
			</view>

			<view class="xflex-x">
				<view class="lab">
					下单时间：
				</view>
				<view class="xflex-x">
					<view class="value">
						{{infoOrder?.createtime}}
					</view>

				</view>
			</view>


			<view class="xbottom" v-if="!addressInfo.show && !roomdata.show && !timeData.show && !conditionData.show">
				<view class="xflex-x-between">
					<view class="xflex-x">
						<view class="sfk">
							实付款：
						</view>
						<view class="jg">
							<text>￥</text>{{tomonet}}
						</view>
					</view>

					<view class="xflex-x">
						<view class="btn1 xmr12" @click="cancel()">
							取消订单
						</view>
						<view class="btn" @click="getordersave()">
							确认修改
						</view>
					</view>
				</view>

			</view>


			<uni-popup ref="playpop">
				<view class="playpop">
					<view class="playpop-top">
						请输入可接受价格
					</view>

					<view class="playpop-iptbox">
						<input type="number" v-model="popmon" maxlength="6" placeholder="价格">
					</view>

					<view class="playpop-bom xmt32 xflex-x-around">
						<view class="playpop-btn1" @click="$refs.playpop.close()">
							取消
						</view>
						<view class="playpop-btn2" @click="setPasword()">
							确定
						</view>
					</view>
				</view>
			</uni-popup>

		</view>

		<ads :city="addressInfo.city" :hot="addressInfo.hot" v-if="addressInfo.show" @close="addressInfo.show = false">
		</ads>
		<star v-if="roomdata.show" @close="roomdata.show = false"></star>

		<timeComponent v-if="timeData.show" @close="timeData.show = false" />

		<condition v-if="conditionData.show" @close="conditionData.show = false" />
	</view>
</template>

<script setup>
	import ads from "@/components/index/ads.vue"
	import star from "@/components/index/star.vue"
	import timeComponent from "@/components/index/time.vue"
	import condition from "@/components/index/condition.vue"
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		computed
	} from 'vue';

	import {
		slides,
		cityList,
		address,
		orderadd,
		userInfo,
		indexcontent,
		setNightSpecial,
		ordersave,
		hotelconfig,
		hotelscore,
		hotelfree,
		hotelsupport,
		hotelcharge,
		hotelorderdetail,
		hotelcancel
	} from "@/network/home.js"

	import {
		getDayOfWeek,
		getWeekday,
		toformatDate
	} from '@/utils/common.js'
	import {
		useCounterStore
	} from '@/Store/index'

	import {
		storeToRefs
	} from 'pinia';

	const copy = (data) =>{
		uni.setClipboardData({
			data:data,
			success() {
				uni.showToast({
					icon:"none",
					title:'复制成功'
				})
			}
		})
	}

	const counter = useCounterStore()

	// const {
	// 	clones
	// } = storeToRefs(store)


	const cancel = () => {
		hotelcancel({
			id: id.value
		}).then(res => {
			uni.showToast({
				icon: "none",
				title: '取消成功'
			})
			uni.navigateBack()
		})
	}

	let playpop = ref('')

	let popmon = ref('')


	const open = () => {
		playpop.value.open('center')
	}
	popmon.value = counter.enterInfo.price
	// 获取最大值
	let max = ref(0)
	indexcontent({
		name: 'filter_price_max'
	}).then(res => {
		max.value = res.data
	})

	const setPasword = () => {

		// console.log(counter);
		// return
		if (popmon.value == '' && popmon.value == 0) {
			uni.showToast({
				icon: "none",
				title: "输入值不合法"
			})

			return
		}
		console.log(max.value >= popmon.value);
		if (Number(max.value) >= Number(popmon.value)) {
			counter.enterInfo.price = popmon.value
			

			// counter.clones()

			playpop.value.close()
		} else {
			uni.showToast({
				icon: "none",
				title: "超过最大值"
			})
		}

	}

	const getordersave = () => {
		
		ordersave(counter.enterInfo).then(res => {
			uni.showToast({
				icon: "none",
				title: '保存成功'
			})
			counter.enterInfo = {
				order_id: '',
				keyword: '',
				address: '',
				addressname: '',
				lng: '',
				lat: '',
				start: '',
				end: '',
				day: '1',
				star_id: '0',
				price: 100,
				type: '',
				house: [{
					type_id: '0',
					adult: 1,
					children: 0
				}],
				score_id: '0',
				free_id: [],
				support_id: [],
				charge_id: [],
				distance: 5
			}
			counter.enterInfo.order_id = ''
			uni.navigateBack()
		})
	}

	// 获取订单详情

	let id = ref('')
	let infoOrder = ref()

	const gethotelorderdetail = () => {
		hotelorderdetail({
			id: id.value
		}).then(res => {
			infoOrder.value = res.data
			console.log(res);
		})
	}

	const nav = () => {
		uni.navigateBack()
	}


	// 计算价格



	onLoad((option) => {
		id.value = option.id
		gethotelorderdetail()
	})


	let conditionData = reactive({
		show: false
	})

	// 评分
	hotelscore().then(res => {
		datas.score = [{
			id: 0,
			name: '任何'
		}, ...res.data]
	})
	hotelfree().then(res => {
		datas.service = res.data
	})
	hotelsupport().then(res => {
		datas.facility = res.data
	})
	hotelcharge().then(res => {
		datas.charge = res.data
	})
	let datas = reactive({
		score: [], //评分
		service: [], //服务\
		facility: [], //配套
		charge: [], //收费
	})



	const scoreNamecpt = computed(() => {
		let arr = []
		datas.score.forEach(item => {
			if (item.id == counter.enterInfo.score_id) {
				arr.push(item.name)
			}
		})

		return arr.toString()
	})


	let tomonet = computed(() => {
		console.log(infoOrder.value?.price, (counter.enterInfo.day - 1), counter.enterInfo.house.length);
		return (popmon.value * (counter.enterInfo.day - 1) * counter.enterInfo.house.length).toFixed(2)
		//
	})

	// 服务
	const freeNamecpt = computed(() => {
		let arr = []
		datas.service.forEach(item => {
			if (counter.enterInfo.free_id.includes(item.id)) {
				arr.push(item.name)


			}
		})

		return arr.toString()
	})

	// 周边
	const supportNamecpt = computed(() => {
		let arr = []
		datas.facility.forEach(item => {
			if (counter.enterInfo.support_id.includes(item.id)) {
				arr.push(item.name)
			}
		})

		return arr.toString()
	})

	// 收费
	const chargeNamecpt = computed(() => {
		let arr = []
		datas.charge.forEach(item => {
			if (counter.enterInfo.charge_id.includes(item.id)) {
				arr.push(item.name)
			}
		})

		return arr.toString()
	})



	let roomdata = reactive({
		show: false
	})

	// 获取定位
	let addressInfo = reactive({
		show: false,
		hot: [],
		city: []
	})

	// 获取城市列表
	const getcityList = () => {
		cityList({
			type: 'inland'
		}).then(res => {
			console.log(res);
			addressInfo.city = res.data.city
			addressInfo.hot = res.data.hot
			const alphabetArray = Array.from({
				length: 26
			}, () => []);

			res.data.city.forEach(item => {
				const index = item.letter.toLowerCase().charCodeAt(0) - 97; // 获取字母在字母表中的索引位置
				alphabetArray[index] = item.data;
			});

			addressInfo.city = alphabetArray
		})
	}

	getcityList()

	// 计算成人
	let adult = computed(() => {
		let num = 0
		counter.enterInfo.house.forEach(item => {
			num += item.adult
		})
		return num
	})

	// 儿童
	let child = computed(() => {
		let num = 0
		counter.enterInfo.house.forEach(item => {
			num += item.children
		})
		return num
	})

	// 时间
	let timeData = reactive({
		show: false
	})
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.order {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.xz {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.top {
		padding-bottom: 27rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.sn {
		font-weight: bold;
		font-size: 30rpx;
		color: #111111;
	}

	.state {
		font-weight: 500;
		font-size: 24rpx;
		color: #198FFF;
	}

	.addicon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.jt {
		width: 24rpx;
		height: 24rpx;
		margin-left: 5rpx;
	}

	.addname {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.addxg {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.time {
		font-weight: 800;
		font-size: 36rpx;
		color: #222222;

	}

	.info {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin-top: 17rpx;
	}

	.star {

		// background: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}

	.cancel {
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		line-height: 88rpx;
	}

	.publish {
		width: 440rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.lab {
		font-weight: bold;
		font-size: 24rpx;
		color: #7C7C7C;
		width: 160rpx;
	}

	.value {
		font-weight: bold;
		font-size: 24rpx;
		color: #272727;
	}

	.copy {
		font-weight: bold;
		font-size: 22rpx;
		color: #333333;
		width: 70rpx;
		height: 36rpx;
		background: #F2F2F2;
		border-radius: 18rpx;
		text-align: center;
		line-height: 36rpx;
	}

	.btn {
		width: 200rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 72rpx;
	}

	.sfk {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
	}

	.jg {
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 36rpx;
		color: #F3371E;

		&>text {
			font-size: 32rpx;
		}
	}

	.btn1 {
		width: 200rpx;
		height: 72rpx;
		border-radius: 36rpx;
		border: 2px solid #CCCCCC;


		border-radius: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		text-align: center;
		line-height: 72rpx;
	}

	.playpop {
		width: 520rpx;
		// height: 476rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		opacity: 1;

		&-top {
			width: 520rpx;
			height: 124rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 12rpx 12rpx 0 0;
			opacity: 1;
			text-align: center;
			line-height: 124rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		&-iptbox {
			margin: 56rpx 34rpx 0;
			border-bottom: 1rpx solid #0DBFFB;

		}

		&-bom {
			margin-top: 40rpx;
			padding-bottom: 20rpx;
		}

		&-btn1 {
			width: 200rpx;
			height: 72rpx;
			border-radius: 36rpx;
			opacity: 1;
			border: 2rpx solid #0DBFFB;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #0DBFFB;
			text-align: center;
			line-height: 72rpx;
		}

		&-btn2 {
			width: 200rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 36rpx;
			opacity: 1;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 72rpx;
		}
	}


	.setplaypop {
		width: 520rpx;
		height: 476rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		opacity: 1;
	}
</style>